<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js发送消息练习</title>
    <style>
        body,p{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 80px auto 0px;
            width: 300px;
            height: 400px;
            border: 3px solid #333;
        }
        .warp{
            overflow-y:auto ;
            overflow-x: hidden;
        }
        .content{
            width: 300px;
            height: 350px;

        }
        .foot{
            text-align: center;
            width: 300px;
            height: 50px;
            border-top: 1px solid #333;
            line-height: 50px;
            position: relative;
        }
        .foot img{
            position: absolute;
            width: 32px;
            height: 32px;
            top: 9px;
            left: 0px;
        }
        .content p{
            height: 36px;
            width: 300px;
            line-height: 36px;
            position: relative;
        }
        .content p img{
            position: absolute;
            top: 2px;
        }
        .content .xx2 img{
            right: 20px;
        }
        .content .xx1 img{
            left: 20px;
        }
        .content p span{
            display: inline-block;
            height: 35px;
            line-height: 35px;
            position: absolute;
            top: 2px;
        }
        .content  .xx1 span{
            left: 53px;
        }
        .content  .xx2 span{
            right: 53px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oImg=document.getElementById("img");
            var oBtn=document.getElementById("btn");
            var oInput=document.getElementById("text");
            var oDiv=document.getElementById("content");
            var arr=["img/fsxx/32.png","img/fsxx/33.png"];
            var num=0;
            oImg.src=arr[num];
            oImg.onclick=function(){
                if(num==arr.length-1){
                    num=0;
                }else{
                    num++;
                }
                oImg.src=arr[num];
            }
            oBtn.onclick=function(){
                if(oInput.value==""){
                    alert("先说点什么吧");
                    return;
                }
                if(num%2==0){
                    oDiv.innerHTML="<p class='xx1'><img src='"+arr[num]+"'>"+"<span>"+oInput.value+"</span></p>"+oDiv.innerHTML;
                }else{
                    oDiv.innerHTML="<p class='xx2'><img src='"+arr[num]+"'>"+"<span>"+oInput.value+"</span></p>"+oDiv.innerHTML;
                }
                oInput.value="";
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="warp">
        <div class="content" id="content">

        </div>
    </div>
    <div class="foot">
        <img id="img">
        <input type="text" id="text">
        <button type="button" id="btn">发送</button>
    </div>
</div>


</body>
</html>